Day6圖片

2023 iThome 鐵人賽

DAY 6

自我挑戰組

學習網頁前端基本的技術，包含如何使用HTML標籤跟CSS做出基本的網頁版型，了解bootstrap template如何建置網頁架構。系列第 6 篇

15th鐵人賽

jenny

2023-09-21 00:48:25

272 瀏覽

分享至

圖片標籤：
img 標籤是將圖片插入網頁中。
1.常見的屬性：
(1)src="url"，圖片的來源，url必須放文件檔名，並且只能使用瀏覽器支持的圖片，如jpg、gif、tif。
(2)width =pixel 設定圖片的寬度。
(3)border=pixel 設定圖片框線粗細。
(4)height =pixel 設定圖片的高度。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>img</title>
    </head>
    <body>
         <!--寬度500像素，高度500像素，框線5像素-->
        <img src="dog.jpg" width="500" height="500" border="5">
        <!--寬度250像素，高度300像素-->
        <img src="OIP.jpg" width="250" height="300">
    </body>
</html>

2.圖片對齊方式：
要設定圖片對齊方式用align屬性，設定圖片在網頁的位子是置中、靠右、靠左。
或是用valign 屬性，設定圖片的垂直位置上、中、下。
圖片在右邊的程式碼:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>img</title>
    </head>
    <body>
         <!--寬度800像素，高度500像素-->
        <img src="dog.jpg" width="800" height="500" align="right">
        <h1>狗狗的成長</h1>
       
        
    </body>
</html>

圖片在右邊呈現畫面:

圖片在左邊的程式碼:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>img</title>
    </head>
    <body>
         <!--寬度800像素，高度500像素-->
        <img src="dog.jpg" width="800" height="500" align="left">
        <h1>狗狗的成長</h1>
       
        
    </body>
</html>

圖片在左邊呈現畫面:

3.影像地圖標籤：
影像地圖標籤是在網頁上規劃區域，讓每個區塊都有超連結的效果，按到該區域，就會連結到指定的頁面。

一開始先插入一個圖，用作影像地圖的基礎。
例如:
<img src="dog.jpg" alt="狗狗" usemap=#map>

再來定義影像地圖，會用到兩個標籤，
map標籤是與圖片做連結，name 是給地圖指定一個名稱，他與img中 use map 相呼應。
map包含數個area 用來劃分不同的區域。
格式是 <area shape=形狀 cords =座標值 href= 連結網址 alt =圖片說明 >

(1)shape=react，矩形連結，有左上x座標、左上y座標、右下x座標、右下y座標
(2)shape=circle ，圓形連結，有x座標、y座標、半徑
(3)shape=poly，多邊形連結，其座標值很多，但是必須是偶數。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>map</title>
    </head>
    <body>
        <img src="dog.jpg" alt="狗狗" usemap="#map">

    <map name="map">
    <area shape="rect" coords="10,10,50,40" href="a.html">
    <area shape="circle" coords="100,400,80" href="book.html">
    <area shape="poly" coords="120,10,160,300" href="div.html">
    </map>

    </body>
</html>